<template>
  <div>{{ title }}</div>
  <div>{{ value }}</div>
  <div class="card-span" ref="cardSpanRef"></div>
</template>

<script lang="ts">
export default {
  name: "XCard",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const cardSpanRef = ref();
const props = defineProps<{
  title: string;
  value: string;
}>();
onMounted(() => {
  const myEcharts = echarts.init(cardSpanRef.value);
  const option = {
    xAxis: {
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      show: false,
      boundaryGap: false,
    },
    yAxis: {
      show: false,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        show:true
      },
    },
    series: [
      {
        name: props.title,
        type: "line",
        data: [22, 44, 55, 33, 55, 66, 33, 22, 12, 55, 9, 22],
        smooth: true,
        itemStyle: {
          opacity: 0,
        },
        areaStyle: {
          color: "#e4feff",
        },
        lineStyle: {
          color: "#5b76c8",
        },
      },
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
  };
  myEcharts.setOption(option);
});
</script>

<style scoped>
.card-span {
  width: 100%;
  height: 100px;
}
</style>